<template>
	<view class="page">
		<z-paging ref="paging" :refresher-out-rate="0.8" :show-empty-view-reload-when-error="false"
			:empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
			empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
			empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
			empty-view-error-text="暂无数据" safe-area-inset-bottom :refresher-status.sync="refresherStatus" bg-color="#FFF"
			v-model="dataList" @query="queryList">
			<view class="top" slot="top">
				<view class="search_t" style="display: flex;justify-content: space-between;">
					<view class="" style="width: 540rpx;margin: 12rpx 0 0 40rpx;">
						<u-input prefixIcon="search" border="none" prefixIconStyle="font-size: 22px;color: #909399"
							placeholder="请输入搜索标题" v-model="searchValue" clearable></u-input>
					</view>
					<view
						style="width: 104rpx; height: 64rpx; background: #588BF3; border-radius: 0px 64rpx 64rpx 0px;color: #fff;line-height: 64rpx;font-size: 28rpx;font-weight: bold;text-align: center;"
						@click="search">搜索</view>
				</view>
			</view>
			<view v-if="this.searchValue">
				<image
					src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/310a0fbf44c341aa98cd844cdb100c83.png"
					mode=""></image>
			</view>
			<!-- 查询结果 -->
			<view class="receives">
				<view class="receive_info" v-for="(item, index) in dataList" :key="index"
					@click='to_detail(item.receiveId,item.couponNum)'>
					<view class="info_time">
						<text class="info_time_t">{{item.createTime}}</text>
						<view class="info_time_i">
							<u--text text="待使用" color="#2979ff" bold size="28rpx" align="right"
								v-if="item.status === '1'" />
							<u--text text="未回寄" color="#2979ff" bold size="28rpx" align="right"
								v-if="item.status === '2'" />
							<u--text text="已完成" color="#2979ff" bold size="28rpx" align="right"
								v-if="item.status === '9'" />
							<u--text text="待发货" color="#2979ff" bold size="28rpx" align="right"
								v-if="item.status === '4'" />
							<u--text text="待收货" color="#2979ff" bold size="28rpx" align="right"
								v-if="item.status === '3'" />
							<u--text text="等待检测" color="#2979ff" bold size="28rpx" align="right"
								v-if="item.status === '5'" />
							<u-icon name="arrow-right" color="#2979ff" size="14" top="2rpx" />
						</view>
					</view>
					<view class="receive_detail">
						<image class="detail_img" :src="item.thumbnail" mode=""></image>
						<view>
							<text class="detail_t">{{item.goodsName}}</text>
							<view class="detail_tt">
								<text v-if="item.skuSimpleSpecs != null">{{item.skuSimpleSpecs || '--'}}</text>
								<text v-if="item.skuSimpleSpecs == null">--</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		receiveList,
		getCouponNum
	} from '@/api/receive';
	export default {
		data() {
			return {
				cellIconStyle: {
					width: '36rpx',
					height: '36rpx',
					marginRight: '14rpx'
				},
				cellTitleStyle: {
					fontSize: '28rpx',
					color: '#333'
				},
				refresherStatus: 0,
				searchValue: '', //搜索关键词
				dataList: []
			};
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			to_detail(id, couponNum) { //领取记录页面
				uni.$u.route({
					url: '/pages_receive/record/index',
					params: {
						id: id,
						couponNum: couponNum
					}
				});
			},
			search() {
				this.$refs.paging.reload();
				this.$refs.paging.scrollToTop();
			},
			async queryList(pageNo, pageSize) {
				if (!this.searchValue) {
					setTimeout(() => {
						this.$refs.paging.completeByTotal(0);
					}, 500);
				} else {
					const that = this;
					const params = {
						pageSize: pageSize,
						pageNum: pageNo,
						searchValue: this.searchValue
					};
					that.pageLoading = true;
					receiveList(params)
						.then(result => {
							that.$refs.paging.complete(result.data.rows);
						})
						.catch(error => {
							that.$refs.paging.complete(false);
						})
						.finally(() => {
							that.pageLoading = false;
						});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.search_t {
		width: 694rpx;
		height: 64rpx;
		background: #E1E1E1;
		border-radius: 64rpx;
	}

	.top {
		padding: 36rpx 28rpx 0;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		height: 100vh;
	}

	.receives {
		padding: 36rpx 28rpx 0;
	}

	.receive_info {
		background: #FFFFFF;
		box-shadow: 0px 0px 16rpx 2rpx rgba(0, 0, 0, 0.12);
		border-radius: 12rpx;
		margin-top: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.info_time {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		align-items: center;
		padding: 0 24rpx;
	}

	.info_time_t {
		display: block;
	}

	.info_time_i {
		display: flex;
		color: #588BF3;
	}

	.receive_detail {
		border-top: 2rpx solid rgba(243, 243, 243, 0.7);
		padding: 26rpx 0 38rpx;
		display: flex;
		align-items: center;
	}

	.detail_img {
		width: 244rpx;
		height: 158rpx;
		border-radius: 8rpx;
		margin: 0 20rpx 0 10rpx;
	}

	.detail_t {
		display: block;
		width: 412rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.detail_tt {
		margin-top: 18rpx;
		font-size: 26rpx;
		color: #666666;

		text {
			margin-right: 10rpx;
		}
	}

	.rec {
		margin-top: 300rpx;
		text-align: center;
		color: #b5b5b5;
	}

	.rec_img {
		width: 400rpx;
		height: 400rpx;
	}
</style>
